<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RustPBX WebRTC Interface</title>
    <!-- Tailwind CSS CDN -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <!-- Alpine.js CDN -->
    <script src="./static/js/agent.js"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
        integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body class="bg-gray-100 min-h-screen pb-20" x-data="mainApp()" x-init="init()">
    <div class="container mx-auto p-4">
        <header class="bg-gradient-to-r from-gray-700 to-gray-600 text-white p-4 rounded-t-lg shadow">
            <h1 class="text-2xl font-bold"><a href="https://github.com/restsend/rustpbx?ref=rustpbx.com"
                    target="_blank">RustPBX</a> WebRTC Interface</h1>
            <p class="text-sm  flex items-center justify-end gap-2">
                <span class="flex items-center">
                    RustPBX is a Software-Defined PBX system built with Rust and WebRTC.
                    <a href="https://github.com/restsend/rustpbx?ref=rustpbx.com" target="_blank"
                        class="flex items-center ml-2">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 367.4 90" class="h-6 w-auto">
                            <g fill="currentColor">
                                <path
                                    d="m46.1 0c-25.5 0-46.1 20.6-46.1 46.1 0 20.4 13.2 37.7 31.5 43.8 2.3.4 3.2-1 3.2-2.2 0-1.1-.1-4.7-.1-8.6-11.6 2.1-14.6-2.8-15.5-5.4-.5-1.3-2.8-5.4-4.7-6.5-1.6-.9-3.9-3-.1-3.1 3.6-.1 6.2 3.3 7.1 4.7 4.2 7 10.8 5 13.4 3.8.4-3 1.6-5 2.9-6.2-10.3-1.2-21-5.1-21-22.8 0-5 1.8-9.2 4.7-12.4-.5-1.2-2.1-5.9.5-12.2 0 0 3.9-1.2 12.7 4.7 3.7-1 7.6-1.6 11.5-1.6s7.8.5 11.5 1.6c8.8-6 12.7-4.7 12.7-4.7 2.5 6.3.9 11.1.5 12.2 2.9 3.2 4.7 7.3 4.7 12.4 0 17.7-10.8 21.6-21.1 22.8 1.7 1.4 3.1 4.2 3.1 8.5 0 6.2-.1 11.1-.1 12.7 0 1.2.9 2.7 3.2 2.2 18.2-6.1 31.4-23.4 31.4-43.8.3-25.4-20.4-46-45.9-46z">
                                </path>
                            </g>
                        </svg>
                    </a>
                </span>
            </p>
        </header>

        <div class="flex flex-col md:flex-row gap-4 mt-4">
            <!-- Configuration Column -->
            <div class="w-full md:w-1/2 bg-white p-4 rounded-lg shadow">
                <h2 class="text-xl font-bold mb-4 border-b pb-2">Configuration</h2>

                <!-- Call Type Selection -->
                <div class="mb-6">
                    <h3 class="text-lg font-semibold mb-2">Call Type</h3>
                    <div class="flex space-x-4 mb-4">
                        <label class="inline-flex items-center">
                            <input type="radio" name="callType" value="webrtc" x-model="config.callType"
                                class="form-radio">
                            <span class="ml-2">WebRTC</span>
                        </label>
                        <label class="inline-flex items-center">
                            <input type="radio" name="callType" value="sip" x-model="config.callType"
                                class="form-radio">
                            <span class="ml-2">SIP</span>
                        </label>
                    </div>

                    <!-- SIP Configuration (shown only when SIP is selected) -->
                    <div x-show="config.callType === 'sip'" class="border p-4 rounded mb-4">
                        <div class="mb-3">
                            <label for="sipCaller" class="block text-sm font-medium mb-1">Caller</label>
                            <input type="text" id="sipCaller" x-model="config.sip.caller"
                                placeholder="e.g. sip:user@example.com" class="border p-2 rounded w-full">
                        </div>
                        <div class="mb-3">
                            <label for="sipCallee" class="block text-sm font-medium mb-1">Callee</label>
                            <input type="text" id="sipCallee" x-model="config.sip.callee"
                                placeholder="e.g. sip:destination@example.com" class="border p-2 rounded w-full">
                        </div>
                        <div class="mb-3">
                            <label for="sipUsername" class="block text-sm font-medium mb-1">Username</label>
                            <input type="text" id="sipUsername" x-model="config.sip.username" placeholder="SIP username"
                                class="border p-2 rounded w-full">
                        </div>
                        <div class="mb-3">
                            <label for="sipPassword" class="block text-sm font-medium mb-1">Password</label>
                            <input type="password" id="sipPassword" x-model="config.sip.password"
                                placeholder="SIP password" class="border p-2 rounded w-full">
                        </div>
                    </div>
                </div>

                <!-- Recording Configuration -->
                <div class="mb-6">
                    <div class="flex items-center mb-2">
                        <input type="checkbox" id="enableRecording" x-model="config.recording.enabled" class="mr-2">
                        <label for="enableRecording">Enable Recording</label>
                    </div>
                </div>

                <!-- ASR, TTS, LLM Tabbed Configuration -->
                <div class="mb-6">
                    <h3 class="text-lg font-semibold mb-2">Advanced Settings</h3>

                    <!-- Tab Navigation -->
                    <div class="flex border-b">
                        <button @click="config.uiState.activeTab = 'llm'"
                            class="py-2 px-4 font-medium border-b-2 transition-colors duration-200"
                            :class="config.uiState.activeTab === 'llm' ? 'border-blue-500 text-blue-600' : 'border-transparent hover:text-blue-500'">
                            LLM
                        </button>
                        <button @click="config.uiState.activeTab = 'asr'"
                            class="py-2 px-4 font-medium border-b-2 transition-colors duration-200"
                            :class="config.uiState.activeTab === 'asr' ? 'border-blue-500 text-blue-600' : 'border-transparent hover:text-blue-500'">
                            ASR
                        </button>
                        <button @click="config.uiState.activeTab = 'tts'"
                            class="py-2 px-4 font-medium border-b-2 transition-colors duration-200"
                            :class="config.uiState.activeTab === 'tts' ? 'border-blue-500 text-blue-600' : 'border-transparent hover:text-blue-500'">
                            TTS
                        </button>
                        <button @click="config.uiState.activeTab = 'denoise'"
                            class="py-2 px-4 font-medium border-b-2 transition-colors duration-200"
                            :class="config.uiState.activeTab === 'denoise' ? 'border-blue-500 text-blue-600' : 'border-transparent hover:text-blue-500'">
                            Denoise
                        </button>
                        <button @click="config.uiState.activeTab = 'vad'"
                            class="py-2 px-4 font-medium border-b-2 transition-colors duration-200"
                            :class="config.uiState.activeTab === 'vad' ? 'border-blue-500 text-blue-600' : 'border-transparent hover:text-blue-500'">
                            VAD
                        </button>
                        <button @click="config.uiState.activeTab = 'metrics'"
                            class="py-2 px-4 font-medium border-b-2 transition-colors duration-200"
                            :class="config.uiState.activeTab === 'metrics' ? 'border-blue-500 text-blue-600' : 'border-transparent hover:text-blue-500'">
                            Metrics
                        </button>
                    </div>

                    <!-- Tab Content -->
                    <div class="py-4">
                        <!-- TTS Tab -->
                        <div x-show="config.uiState.activeTab === 'tts'" class="space-y-3">
                            <div>
                                <label for="ttsProvider" class="text-sm font-medium">Provider</label>
                                <select id="ttsProvider" x-model="config.tts.provider"
                                    class="border p-2 rounded w-full">
                                    <option value="tencent">Tencent Cloud</option>
                                    <option value="aliyun">Aliyun</option>
                                </select>
                            </div>

                            <div class="flex items-center mb-4">
                                <input type="checkbox" id="ttsStreaming" x-model="config.tts.streaming" class="mr-2">
                                <label for="ttsStreaming" class="font-medium">Enable Streaming Mode</label>
                            </div>

                            <div x-show="config.tts.provider === 'tencent'" class="border-t pt-3 space-y-2">
                                <p class="text-xs text-gray-600 mb-2">Tencent Cloud</p>
                                <div>
                                    <label for="ttsAppId" class="text-sm">App ID</label>
                                    <input type="text" id="ttsAppId" x-model="config.tts.appId"
                                        placeholder="Enter Tencent App ID" class="border p-2 rounded w-full">
                                </div>
                                <div>
                                    <label for="ttsSecretId" class="text-sm">Secret ID</label>
                                    <input type="text" id="ttsSecretId" x-model="config.tts.secretId"
                                        placeholder="Enter Tencent Secret ID" class="border p-2 rounded w-full">
                                </div>
                                <div>
                                    <label for="ttsSecretKey" class="text-sm">Secret Key</label>
                                    <input type="password" id="ttsSecretKey" x-model="config.tts.secretKey"
                                        placeholder="Enter Tencent Secret Key" class="border p-2 rounded w-full">
                                </div>

                            </div>

                            <div x-show="config.tts.provider === 'aliyun'" class="border-t pt-3 space-y-2">
                                <p class="text-xs text-gray-600 mb-2">Aliyun</p>
                                <div>
                                    <label for="ttsApiKey" class="text-sm">API Key</label>
                                    <input type="password" id="ttsApiKey" x-model="config.tts.apiKey"
                                        placeholder="Enter Aliyun API Key" class="border p-2 rounded w-full">
                                </div>
                            </div>

                            <div class="border-t pt-3 space-y-2">
                                <div>
                                    <label for="ttsSpeaker" class="text-sm">Speaker</label>
                                    <select id="ttsSpeaker" x-model="config.tts.speaker"
                                        class="border p-2 rounded w-full">
                                        <option value="female">Female</option>
                                        <option value="male">Male</option>
                                    </select>
                                </div>
                                <div>
                                    <label for="ttsSpeed" class="text-sm">Speech Speed</label>
                                    <input type="range" id="ttsSpeed" x-model="config.tts.speed" min="0.5" max="2.0"
                                        step="0.1" class="w-full">
                                    <span class="text-xs text-right" x-text="config.tts.speed"></span>
                                </div>
                                <div>
                                    <label for="ttsVolume" class="text-sm">Volume</label>
                                    <input type="range" id="ttsVolume" x-model="config.tts.volume" min="0" max="10"
                                        step="1" class="w-full">
                                    <span class="text-xs text-right" x-text="config.tts.volume"></span>
                                </div>
                            </div>
                        </div>

                        <!-- ASR Tab -->
                        <div x-show="config.uiState.activeTab === 'asr'" class="space-y-3">
                            <div>
                                <label for="asrProvider" class="text-sm font-medium">Provider</label>
                                <select id="asrProvider" x-model="config.asr.provider"
                                    class="border p-2 rounded w-full">
                                    <option value="tencent">Tencent Cloud</option>
                                    <option value="aliyun">Aliyun</option>
                                </select>
                            </div>

                            <div x-show="config.asr.provider === 'tencent'" class="border-t pt-3 space-y-2">
                                <p class="text-xs text-gray-600 mb-2">Tencent Cloud</p>
                                <div>
                                    <label for="asrAppId" class="text-sm">App ID</label>
                                    <input type="text" id="asrAppId" x-model="config.asr.appId"
                                        placeholder="Enter Tencent App ID" class="border p-2 rounded w-full">
                                </div>
                                <div>
                                    <label for="asrSecretId" class="text-sm">Secret ID</label>
                                    <input type="text" id="asrSecretId" x-model="config.asr.secretId"
                                        placeholder="Enter Tencent Secret ID" class="border p-2 rounded w-full">
                                </div>
                                <div>
                                    <label for="asrSecretKey" class="text-sm">Secret Key</label>
                                    <input type="password" id="asrSecretKey" x-model="config.asr.secretKey"
                                        placeholder="Enter Tencent Secret Key" class="border p-2 rounded w-full">
                                </div>
                                <div>
                                    <label for="asrModel" class="text-sm">Model</label>
                                    <input type="text" id="asrModel" x-model="config.asr.model"
                                        placeholder="e.g. 16k_zh" class="border p-2 rounded w-full">
                                </div>
                            </div>

                            <div x-show="config.asr.provider === 'aliyun'" class="border-t pt-3 space-y-2">
                                <p class="text-xs text-gray-600 mb-2">Aliyun</p>
                                <div>
                                    <label for="asrApiKey" class="text-sm">API Key</label>
                                    <input type="password" id="asrApiKey" x-model="config.asr.apiKey"
                                        placeholder="Enter Aliyun API Key" class="border p-2 rounded w-full">
                                </div>
                                <div>
                                    <label for="asrModel" class="text-sm">Model</label>
                                    <input type="text" id="asrModel" x-model="config.asr.model"
                                        placeholder="e.g. paraformer-realtime-v2" class="border p-2 rounded w-full">
                                </div>
                                <div>
                                    <label for="asrLanguage" class="text-sm">Language</label>
                                    <select id="asrLanguage" x-model="config.asr.language"
                                        class="border p-2 rounded w-full">
                                        <option value="">None</option>
                                        <option value="zh">中文</option>
                                        <option value="en">English</option>
                                        <option value="ja">日本語</option>
                                        <option value="yue">粵語</option>
                                        <option value="ko">한국어</option>
                                        <option value="de">Deutsch</option>
                                        <option value="fr">Français</option>
                                        <option value="ru">Русский</option>
                                    </select>
                                </div>
                            </div>

                            <div class="border-t pt-3 space-y-2">
                                <div>
                                    <label for="asrInactivityTimeout" class="text-sm">Inactivity Timeout (ms)</label>
                                    <input type="number" id="asrInactivityTimeout"
                                        x-model="config.asr.inactivityTimeout" placeholder="35000"
                                        class="border p-2 rounded w-full">
                                    <p class="text-xs text-gray-600 mt-1">通话将在ASR无活动超过此时间后自动挂断</p>
                                </div>
                            </div>
                        </div>

                        <!-- LLM Tab -->
                        <div x-show="config.uiState.activeTab === 'llm'" class="space-y-2">
                            <div class="flex items-center mb-4">
                                <input type="checkbox" id="useLlmProxy" x-model="config.llm.useProxy" class="mr-2">
                                <label for="useLlmProxy" class="font-medium">Use qwen3-14b model</label>
                                <span class="ml-2 text-xs text-gray-600">He is not the smartest guy</span>
                            </div>

                            <!-- LLM API Settings (shown only when not using proxy) -->
                            <div x-show="!config.llm.useProxy" class="border-t pt-3 mb-3">
                                <p class="text-xs text-gray-600 mb-2">External API settings</p>
                                <label for="llmBaseurl" class="text-sm">API Endpoint</label>
                                <input type="text" id="llmBaseurl" x-model="config.llm.baseurl"
                                    class="border p-2 rounded w-full mb-2">
                                <label for="llmApiKey" class="text-sm">API Key</label>
                                <input type="password" id="llmApiKey" x-model="config.llm.apiKey"
                                    class="border p-2 rounded w-full mb-2">
                                <!-- Always shown LLM settings -->
                                <label for="llmModel" class="text-sm">Model</label>
                                <input type="text" id="llmModel" x-model="config.llm.model" placeholder="qwen-turbo"
                                    class="border p-2 rounded w-full">
                            </div>

                            <label for="ttsGreeting" class="text-sm mt-4">Greeting Message</label>
                            <textarea id="ttsGreeting" x-model="config.tts.greeting"
                                placeholder="Hello, how can I help you today?"
                                class="border p-2 rounded w-full h-20"></textarea>
                            <p class="text-xs text-gray-600 mt-1">This message will be played when the call connects</p>

                            <label for="llmPrompt" class="text-sm">System Prompt</label>
                            <textarea id="llmPrompt" x-model="config.llm.prompt"
                                class="border p-2 rounded w-full h-24"></textarea>
                        </div>

                        <!-- Denoise Tab -->
                        <div x-show="config.uiState.activeTab === 'denoise'" class="space-y-2">
                            <div class="flex items-center mb-2">
                                <input type="checkbox" id="enableDenoise" x-model="config.denoise.enabled" class="mr-2">
                                <label for="enableDenoise">Enable Noise Denoiser</label>
                            </div>
                        </div>

                        <!-- VAD Tab -->
                        <div x-show="config.uiState.activeTab === 'vad'" class="space-y-2">
                            <div class="flex items-center mb-2">
                                <input type="checkbox" id="enableVad" x-model="config.vad.enabled" class="mr-2">
                                <label for="enableVad">Enable Voice Activity Detection (VAD)</label>
                            </div>
                            <div x-show="config.vad.enabled" class="pl-4 space-y-2">
                                <div class="flex flex-col">
                                    <label for="vadType" class="text-sm">Vad type</label>
                                    <select id="vadType" x-model="config.vad.type" class="border p-2 rounded w-full">
                                        <option value="webrtc">WebRTC</option>
                                        <option value="silero">Silero</option>
                                    </select>

                                    <template x-if="config.vad.type === 'silero'">
                                        <div>
                                            <label for="vadVoiceThreshold" class="text-sm">Voice Threshold</label>
                                            <input type="range" id="vad Voice Threshold"
                                                x-model="config.vad.voiceThreshold" min="0" max="1" step="0.01"
                                                class="w-full">
                                            <span class="text-xs text-right" x-text="config.vad.voiceThreshold"></span>
                                        </div>
                                    </template>

                                    <label for="vadRatio" class="text-sm">Ratio</label>
                                    <input type="range" id="vadRatio" x-model="config.vad.ratio" min="0" max="1"
                                        step="0.01" class="w-full">
                                    <span class="text-xs text-right" x-text="config.vad.ratio"></span>

                                    <label for="vadSpeechPadding" class="text-sm">Speech Padding</label>
                                    <input type="range" id="vadSpeechPadding" x-model="config.vad.speechPadding"
                                        min="50" max="600" step="50" class="w-full">
                                    <span class="text-xs text-right" x-text="config.vad.speechPadding"></span>

                                    <label for="vadSilencePadding" class="text-sm">Silence Padding</label>
                                    <input type="range" id="vadSilencePadding" x-model="config.vad.silencePadding"
                                        min="50" max="600" step="50" class="w-full">
                                    <span class="text-xs text-right" x-text="config.vad.silencePadding"></span>
                                </div>
                            </div>
                        </div>

                        <!-- Metrics Tab -->
                        <div x-show="config.uiState.activeTab === 'metrics'" class="space-y-2">
                            <div class="bg-gray-100 p-4 rounded">
                                <h3 class="text-lg font-semibold mb-2">Performance Metrics</h3>
                                <p class="text-sm text-gray-600 mb-4">This tab shows performance metrics for various
                                    operations.</p>

                                <div class="overflow-x-auto">
                                    <table class="min-w-full bg-white border border-gray-200">
                                        <thead>
                                            <tr class="bg-gray-100">
                                                <th class="py-2 px-4 border-b text-left">Time</th>
                                                <th class="py-2 px-4 border-b text-left">Service</th>
                                                <th class="py-2 px-4 border-b text-left">Metric</th>
                                                <th class="py-2 px-4 border-b text-right">Duration (ms)</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <template
                                                x-for="(entry, index) in eventLog.filter(e => e.type === 'METRICS')"
                                                :key="index">
                                                <tr class="hover:bg-gray-50">
                                                    <td class="py-2 px-4 border-b text-gray-700 font-mono"
                                                        x-text="formatTime(entry.timestamp)"></td>
                                                    <td class="py-2 px-4 border-b"
                                                        x-text="entry.metricsKey ? entry.metricsKey.split('.')[2] : ''">
                                                    </td>
                                                    <td class="py-2 px-4 border-b"
                                                        x-text="entry.metricsKey ? entry.metricsKey.split('.')[0] + '.' + entry.metricsKey.split('.')[1] : ''">
                                                    </td>
                                                    <td class="py-2 px-4 border-b text-right font-medium"
                                                        x-text="entry.metricsDuration"></td>
                                                </tr>
                                            </template>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Debug Console Column -->
            <div class="w-full md:w-1/2 bg-white p-4 rounded-lg shadow">
                <h2 class="text-xl font-bold mb-4 border-b pb-2">Debug Console</h2>

                <!-- Connection Status -->
                <div class="mb-4 flex items-center space-x-4 justify-between">
                    <div class="flex items-center space-x-4">
                        <div class="flex items-center">
                            <span class="mr-2">WebSocket:</span>
                            <span :class="wsStatus === 'connected' ? 'text-green-500' : 'text-red-500'">
                                <i
                                    :class="wsStatus === 'connected' ? 'fas fa-plug' : 'fas fa-plug-circle-exclamation'"></i>
                                <span x-text="wsStatus"></span>
                            </span>
                        </div>
                        <div class="flex items-center">
                            <span class="mr-2">Call Status:</span>
                            <span :class="rtcStatus === 'connected' ? 'text-green-500' : 'text-red-500'">
                                <i :class="rtcStatus === 'connected' ? 'fas fa-phone' : 'fas fa-phone-slash'"></i>
                                <span x-text="rtcStatus"></span>
                            </span>
                        </div>
                    </div>
                    <button @click="clearEventLog"
                        class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-1 px-3 rounded flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M18 6L6 18M6 6l12 12" />
                        </svg>
                    </button>
                </div>

                <!-- Timeline-style Debug Console -->
                <div class="mb-4">
                    <div class="border rounded h-[600px] p-2 overflow-y-auto bg-gray-50 font-mono text-sm"
                        id="eventLog">
                        <template x-for="(entry, index) in eventLog" :key="index">
                            <div class="border-b border-gray-200 last:border-0">
                                <div class="flex items-start">
                                    <span class="text-gray-700 mr-2 shrink-0 font-medium"
                                        x-text="formatTime(entry.timestamp)"></span>
                                    <span class="mr-2 font-semibold px-2 py-0.5 rounded text-xs"
                                        :class="getLogEntryClass(entry.type)">
                                        <span x-text="entry.type"></span>
                                    </span>
                                    <span x-text="entry.message"
                                        class="whitespace-pre-wrap break-words text-gray-800"></span>
                                </div>
                                <template x-if="entry.type==='ASR'">
                                    <div class="ml-12 mt-1 text-blue-700 font-medium">
                                        <span x-text="entry.asrResult || ''"></span>
                                    </div>
                                </template>
                                <template x-if="entry.type === 'LLM'">
                                    <div class="ml-12 mt-1 text-purple-700 font-medium">
                                        <span x-text="entry.llmResponse || ''"></span>
                                    </div>
                                </template>
                                <template x-if="entry.type === 'TTS'">
                                    <div class="ml-12 mt-1 text-green-700 font-medium">
                                        <span x-text="entry.ttsMessage || ''"></span>
                                    </div>
                                </template>
                                <template x-if="entry.type === 'METRICS'">
                                    <div class="ml-12 mt-1 text-indigo-700 font-medium">
                                        <span x-text="entry.message"></span>
                                    </div>
                                </template>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Fixed Call Controls at Bottom -->
    <div class="fixed bottom-0 left-0 right-0 bg-white shadow-lg p-4 border-t border-gray-200">
        <div class="container mx-auto flex justify-center">
            <div class="flex space-x-6">
                <button @click="startCall" :disabled="callActive"
                    class="bg-green-500 hover:bg-green-600 text-white py-2 px-6 rounded-full disabled:opacity-50 flex items-center">
                    <i class="fas fa-phone mr-2"></i> Call
                </button>
                <button @click="endCall" :disabled="!callActive"
                    class="bg-red-500 hover:bg-red-600 text-white py-2 px-6 rounded-full disabled:opacity-50 flex items-center">
                    <i class="fas fa-phone-slash mr-2"></i> Hang Up
                </button>
                <button @click="toggleDtmfKeypad" :disabled="!callActive"
                    class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-6 rounded-full disabled:opacity-50 flex items-center">
                    <i class="fas fa-keyboard mr-2"></i> DTMF Keypad
                </button>
            </div>
        </div>
    </div>

    <!-- DTMF Keypad Modal -->
    <div x-show="showDtmfKeypad" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
        x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">

        <div class="bg-white rounded-lg shadow-lg p-6 max-w-md w-full" @click.away="showDtmfKeypad = false">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-bold">DTMF Keypad</h3>
                <button @click="showDtmfKeypad = false" class="text-gray-500 hover:text-gray-700">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>

            <div class="grid grid-cols-3 gap-2 mb-4">
                <button @click="sendDtmfTone('1')"
                    class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-4 rounded font-bold text-xl">1</button>
                <button @click="sendDtmfTone('2')"
                    class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-4 rounded font-bold text-xl">2</button>
                <button @click="sendDtmfTone('3')"
                    class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-4 rounded font-bold text-xl">3</button>
                <button @click="sendDtmfTone('4')"
                    class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-4 rounded font-bold text-xl">4</button>
                <button @click="sendDtmfTone('5')"
                    class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-4 rounded font-bold text-xl">5</button>
                <button @click="sendDtmfTone('6')"
                    class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-4 rounded font-bold text-xl">6</button>
                <button @click="sendDtmfTone('7')"
                    class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-4 rounded font-bold text-xl">7</button>
                <button @click="sendDtmfTone('8')"
                    class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-4 rounded font-bold text-xl">8</button>
                <button @click="sendDtmfTone('9')"
                    class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-4 rounded font-bold text-xl">9</button>
                <button @click="sendDtmfTone('*')"
                    class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-4 rounded font-bold text-xl">*</button>
                <button @click="sendDtmfTone('0')"
                    class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-4 rounded font-bold text-xl">0</button>
                <button @click="sendDtmfTone('#')"
                    class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-4 rounded font-bold text-xl">#</button>
            </div>

            <div class="text-gray-600 text-sm">
                Last Tone Sent: <span class="font-mono bg-gray-100 px-2 py-1 rounded"
                    x-text="lastDtmfTone || '-'"></span>
            </div>
        </div>
    </div>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?8cf9f9fa16065ca7ca08e8079e07e2fc";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</body>

</html>